<template>
  <div class="home-layout" :class="{'layout-hide': spanLeft}">
    <Row type="flex">
      <i-col class="home-content-left">
        <div class="home-menu-title" @click="home">三位一体配置平台</div>
        <Menu active-name="1-2" theme="dark" width="auto">
          <Submenu :name="index+1" v-for="(item,index) in menuData" :key="index">
            <template slot="title">
              <Icon type="home" v-show="index===0"></Icon>
              <Icon type="ios-gear-outline" v-show="index===1"></Icon>
              <Icon type="android-person-add" v-show="index===2"></Icon>
              {{item.moduleName}}
            </template>
            <Menu-item :name="index+1+'-'+index2+1" v-for="(item2,index2) in item.moduleItems" :key="index2"
                       @click.native="push(item2.modulePath)"
                       v-if="item2.modulePath!=='card'&&item2.modulePath!=='life'">{{item2.moduleName}}
            </Menu-item>
          </Submenu>
        </Menu>
      </i-col>
      <i-col class="home-content-right">
        <div class="home-head-layout ivu-col">
          <i-button type="text" @click="toggleClick">
            <Icon type="navicon"></Icon>
          </i-button>
          <vhead></vhead>
        </div>
        <div class="home-content">
          <transition name="move" mode="out-in">
            <router-view></router-view>
          </transition>
        </div>
      </i-col>
    </Row>
  </div>
</template>
<script>
  import vhead from './vhead.vue'

  export default {
    data () {
      return {
        spanLeft: false,
        menuData: JSON.parse(sessionStorage.getItem('router'))
      }
    },
    created () {
      this.isMenu()
    },
    components: {vhead},
    methods: {
      home () {
        this.$router.push('/home')
      },
      isMenu () {
        var that = this
        var html = document.querySelector('html')
        var widthData = html.offsetWidth
        if (widthData < 800) {
          this.spanLeft = true
        }
        window.onresize = function () {
          var html = document.querySelector('html')
          var widthData = html.offsetWidth
          if (widthData < 800) {
            that.spanLeft = true
          } else {
            that.spanLeft = false
          }
        }
      },
      toggleClick () {
        if (this.spanLeft === false) {
          this.spanLeft = true
        } else {
          this.spanLeft = false
        }
      },
      push (path) {
        this.$router.push('/' + path)
        var html = document.querySelector('html')
        var widthData = html.offsetWidth
        if (widthData < 800) {
          this.spanLeft = true
        }
      }
    }
  }
</script>
